import React from "react";
import FormUtil from "../Common/FormUtil";

class Repos extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            age: '',
            ok: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        this.state = {
            name: 'test',
            age: '10',
            ok: true
        };
    }

    handleSubmit(e) {
        e.preventDefault();
        console.log(this.state);
    }

    handleChange(e) {
        FormUtil.handleChange(this, e);
    }

    render() {
        return (
            <div>
                <h3>Repos</h3>
                <h5>{this.props.params.name}</h5>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <input type="text" name="name" onChange={this.handleChange} value={this.state.name}/>
                    </div>
                    <div>
                        <input type="text" name="age" onChange={this.handleChange} value={this.state.age}/>
                    </div>
                    <div>
                        <input type="checkbox" name="ok" onChange={this.handleChange}
                               checked={this.state.ok}
                               value="OK"
                        />
                    </div>
                    <button>提交</button>
                </form>
            </div>
        )
    }
}

Repos.propTypes = {
    params: React.PropTypes.Object,
};

export default Repos;
